<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>test</title>
<style type="text/css" media="screen">
 body{
 	margin: 0;
 	padding: 0;
}
ul{
 	list-style: none;
 	padding: 0;
}
li{
 	height: 30px;
 	border-bottom: 1px solid #ddd;
 	line-height: 30px;
 	padding-left: 10px;
}
.scroller .loading{
 	height: 60px;
 	line-height: 60px;
 	text-align: center;
 	width: 100%;
 	background-color: #f1f1f1;}
.scroller{
 	-webkit-overflow-scrolling:touch;
}
</style>
</head>
<body >
<div id="container" class="scroller" >
	<div class="loading">
	 下拉刷新数据
	</div>
	<ul>
		<li><a href="#">列表数据1</a></li>
		<li><a href="#">列表数据2</a></li>
		<li><a href="#">列表数据3</a></li>
		<li><a href="#">列表数据4</a></li>
		<li><a href="#">列表数据5</a></li>
		<li><a href="#">列表数据6</a></li>
		<li><a href="#">列表数据7</a></li>
		<li><a href="#">列表数据8</a></li>
		<li><a href="#">列表数据9</a></li>
		<li><a href="#">列表数据10</a></li>
		<li><a href="#">列表数据11</a></li>
		<li><a href="#">列表数据12</a></li>
		<li><a href="#">列表数据13</a></li>
		<li><a href="#">列表数据14</a></li>
		<li><a href="#">列表数据15</a></li>
		<li><a href="#">列表数据16</a></li>
		<li><a href="#">列表数据17</a></li>
		<li><a href="#">列表数据29</a></li>
		<li><a href="#">列表数据30</a></li>
	</ul>
</div>
<body>
<script type="text/javascript">
	var slide = function (option) {
		var defaults={
			container:'',
			next:function(){}
		}
		var start,
			end,
			length,
			isLock = false,//是否锁定整个操作
			isCanDo = false,//是否移动滑块
			isTouchPad = (/hp-tablet/gi).test(navigator.appVersion),
			hasTouch = 'ontouchstart' in window && !isTouchPad;
		var obj = document.querySelector(option.container);
		var loading=obj.firstElementChild;
		var offset=loading.clientHeight;
		var objparent = obj.parentElement;
		/*操作方法*/
		var fn = {
			//移动容器
			translate: function (diff) {
				obj.style.webkitTransform='translate3d(0,'+diff+'px,0)';
				obj.style.transform='translate3d(0,'+diff+'px,0)';
			},
			//设置效果时间
			setTransition: function (time) {
				obj.style.webkitTransition='all '+time+'s';
				obj.style.transition='all '+time+'s';
			},
			//返回到初始位置
			back: function () {
				fn.translate(0 - offset);
				//标识操作完成
				isLock = false;
			},
			addEvent:function(element,event_name,event_fn){
				if (element.addEventListener) {
					element.addEventListener(event_name, event_fn, false);
				} else if (element.attachEvent) {
					element.attachEvent('on' + event_name, event_fn);
				} else {
					element['on' + event_name] = event_fn;
				}
			}
		};

		fn.translate(0-offset);
		fn.addEvent(obj,'touchstart',start);
		fn.addEvent(obj,'touchmove',move);
		fn.addEvent(obj,'touchend',end);
		fn.addEvent(obj,'mousedown',start);
		fn.addEvent(obj,'mousemove',move);
		fn.addEvent(obj,'mouseup',end);

		//滑动开始
		function start(e) {
			if (objparent.scrollTop <= 0 && !isLock) {
				var even = typeof event == "undefined" ? e : event;
				//标识操作进行中
				isLock = true;
				isCanDo = true;
				//保存当前鼠标Y坐标
				start = hasTouch ? even.touches[0].pageY : even.pageY;
				//消除滑块动画时间
				fn.setTransition(0);
				loading.innerHTML='下拉刷新数据';
			}
			return false;
		}

		//滑动中
		function move(e) {
			if (objparent.scrollTop <= 0 && isCanDo) {
				var even = typeof event == "undefined" ? e : event;
				//保存当前鼠标Y坐标
				end = hasTouch ? even.touches[0].pageY : even.pageY;
				if (start < end) {
					even.preventDefault();
					//消除滑块动画时间
					fn.setTransition(0);
					//移动滑块
					console.log(end-start-offset);
					if((end-start-offset)/2 <= 100) {
						length = end - start - offset - 0.2;
						// length += 0.1;
						console.log(length);
						fn.translate(length);
					} else {
						length+=0.1;
						fn.translate(length);
					}
				}
			}
		}
		//滑动结束
		function end(e) {
			if (isCanDo) {
				isCanDo = false;
				//判断滑动距离是否大于等于指定值
				if (end - start >= offset) {
					//设置滑块回弹时间
					fn.setTransition(1);
					//保留提示部分
					fn.translate(0);
					//执行回调函数
					loading.innerHTML='正在刷新数据';
						if (typeof option.next == "function") {
							option.next.call(fn, e);
						}
				} else {
					//返回初始状态
					fn.back();
				}
			}
		}
	}
	slide({container:"#container",next: function (e) {
		//松手之后执行逻辑,ajax请求数据，数据返回后隐藏加载中提示
		var that = this;
		setTimeout(function () {
			that.back.call();
		}, 2000);
	}});
</script>
</html>